<template>
    <el-main>

      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="queryForm.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <el-table-column
          prop="id"
          label="#"
          width="120">
        </el-table-column>
        <el-table-column
          prop="username"
          label="账户"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="120">
        </el-table-column>
        <el-table-column
          prop="dq"
          label="地区"
          width="120">
        </el-table-column>
        <el-table-column
          prop="tel"
          label="电话"
          width="120">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="120">
        </el-table-column>

      </el-table>

      <el-pagination
        layout="prev, pager, next"
        @current-change="gotoPage"
        :page-count="pages">
      </el-pagination>

    </el-main>
</template>

<script>
  const axios=require("axios");
  const basePath="http://127.0.0.1:10086/api/test/"
    export default {
        name: "User",
      data() {
        return {
          tableData: [],
          multipleSelection: [],
          pages:0,
          queryForm:{
            pageNum:1,
            pageSize:2,
          }
        }
      },

      methods: {
        onSubmit(){
          this.queryForm.pageNum=1;
          this.getList();
        },
          getList(){
            const self=this;
            axios({
              url:basePath+"list?pageNum="+this.queryForm.pageNum+"&pageSize="+this.queryForm.pageSize,
              method:"post",
              data:this.queryForm
            }).then(res=>{
              self.tableData=res.data.list;
              self.pages=res.data.pages;
            })
          },
        gotoPage(pageNum){
          this.queryForm.pageNum=pageNum;
          this.getList();
        },
        delAll(){

        },
        handleSelectionChange(){

        }
      },
      created(){
          this.getList();
      }
    }
</script>

<style scoped>

</style>
